import React,{Component} from 'react';
import { connect } from 'dva';
import { Button, Table, Form, Input, Popconfirm, DatePicker, Select, TreeSelect, Row, Col, } from 'antd';

const FormItem = Form.Item;
const Option = Select.Option;

var _this;
class Temperature extends Component {
  constructor(props) {
      super(props);
  }
  componentDidMount() {
    var dispatch = this.props.dispatch;
    function hello(){ 
      dispatch({
        type: 'temperature/queryList',
        payload: { ..._this.props.form.getFieldsValue(),...{'pageNum':_this.props.temperature.current, 'pageSize':_this.props.temperature.currentSize}},
      });
  } 
    //重复执行某个方法 
  var t1 = window.setInterval(hello,30000); 
}
render() {
    _this = this; 
    const { getFieldDecorator, getFieldsValue, getFieldValue } =  this.props.form;
    const { loading} =  this.props.temperature
    const temperature=this.props.temperature;
    var dispatch = this.props.dispatch;  
    const columns = [{
        title: '机柜名称',
        dataIndex: 'asset_name',
        key: 'asset_name',
        width: 120,
    }, {
        title: '前上温湿度',
        dataIndex: 'frontU',
        key: 'frontU',
        width: 100,
    },{
        title: '前中温湿度',
        dataIndex: 'frontM',
        key: 'frontM',
        width: 100,
    },
    {
        title: '前下温湿度',
        dataIndex: 'frontD',
        key: 'frontD',
        width: 100,
    }, {
        title: '后上温湿度',
        dataIndex: 'backU',
        key: 'backU',
        width: 100,
    }, {
        title: '后中温湿度',
        dataIndex: 'backM',
        key: 'backM',
        width: 100,
    }, {
        title: '后下温湿度',
        dataIndex: 'backD',
        key: 'backD',
        width: 100,
    }];

    const pagination = {
        current: temperature.current,
        pageSize: temperature.currentSize,
        total: temperature.total,
        showSizeChanger: true,
        showTotal: (total => '共' + temperature.total + '条'),
        onShowSizeChange(current, size) {
            dispatch({
                type: 'temperature/queryList',
                payload: { ...getFieldsValue(), ...{ 'pageNum': current, 'pageSize': size } },
            });
        },
        onChange(current) {
            dispatch({
                type: 'temperature/queryList',
                payload: { ...getFieldsValue(), ...{ 'pageNum': current, 'pageSize': temperature.currentSize } },
            });
        },
    };

    const submitHandle = () => {
        dispatch({
            type: 'temperature/queryList',
            payload: { ...getFieldsValue() },
        });
    }
    
    function handleClear() {
        _this.props.form.resetFields();
    }

    return (
        <div style={{ backgroundColor: '#fff' }}>
            <div style={{ minHeight: '100%' }}>
                <div style={{ width: '100%', height: '40px', backgroundColor: '#fff', lineHeight: '40px', paddingLeft: '20px', paddingTop: '10px' }}>
                    <Form layout="inline" >
                        <Row>                           
                            <FormItem
                                label="机柜名称"
                                hasFeedback
                            >
                            {getFieldDecorator('assetName')(<Input placeholder="请输入机柜名称模糊查找" style={{ width: '180px' }} />)}
                            </FormItem>
                           
                            <FormItem>
                                <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                            </FormItem>
                            <FormItem>
                                <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
                            </FormItem>                   
                        </Row>
                    </Form>
                </div>
                <div style={{ width: '100%',padding:"30px 20px", }}>
                    <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={temperature.list} pagination={pagination}
                    />
                </div>
            </div>          
        </div>
    );
}
}
function mapStateToProps(state) {
    return { temperature: state.temperature, loading: state.loading.models.temperature };
}

Temperature= Form.create()(Temperature);

export default connect(mapStateToProps)(Temperature);
